<main>
    <Topbar></Topbar>

    <section v-show="!isLogin">
        <div class="custom-logo">
            <img src="https://yanxuan.nosdn.127.net/39c5e4583753d4c3cb868a64c2c109ea.png" />
        </div>
        <div class="custom-btn">
            <van-button icon="phone-o" type="danger" block @click="isLogin = true">手机号快捷登录</van-button>
            <van-button icon="envelop-o" type="danger" plain block>邮箱账户登录</van-button>
        </div>
        <div class="custom-register">
            <router-link to="/register">手机账号快速注册 <van-icon name="arrow" /></router-link>
        </div>
    </section>
    <section v-show="isLogin" class="custom-login-box">
        <div class="custom-logo">
            <img src="https://yanxuan.nosdn.127.net/39c5e4583753d4c3cb868a64c2c109ea.png" />
        </div>
        <van-form @submit="onSubmit">
            <van-field 
                v-model="phone" 
                name="username" 
                label="手机号"
                placeholder="手机号" 
                maxlength="11" 
                :formatter="formatter"
                clearable
                :error-message="errorPhoneTxt"
                :rules="[{ required: true, message: '请填写手机号' }]"
                @blur="validateNumber()"
                autocomplete="off"
            />
            <van-field 
                v-model="password" 
                :type="passwordType" 
                name="password" 
                label="密码"
                placeholder="密码" 
                maxlength="6"
                autocomplete="off"
                :error-message="errorPasswordTxt"
                :rules="[{ required: true, message: '请填写密码' }]" >
                <template slot="right-icon">
                    <span class="solts" @click="switchPasswordType">
                        <van-icon name="eye" v-if="passwordType==='password'" />
                        <van-icon name="closed-eye" v-else />
                    </span>
                </template>
            </van-field>
            <div class="custom-forget-box">
                <div class="custom-forget-left">
                    <a href="https://aq.reg.163.com/ydaq/welcome?module=offlinePasswordFind#/" target="_blank">忘记密码？</a>
                </div>
                <div class="custom-forget-right">
                    短信快捷登录
                </div>
            </div> 
            <div class="custom-button">
                <van-button block type="danger" native-type="submit">登录</van-button>
            </div>   
            <div class="custom-other-login">
                <a @click="isLogin = false">其他方式登录 <van-icon name="arrow" /></a>
            </div>
        </van-form>
    </section>

    <footer class="custom-quick-login-wrap">
        <div class="custom-quick-login-item">
            <i class="costom-icon costom-icon-weixin"></i>
            <span>微信</span>
        </div>
        <div class="custom-quick-login-item">
            <i class="costom-icon costom-icon-qq"></i>
            <span>QQ</span>
        </div>
        <div class="custom-quick-login-item">
            <i class="costom-icon costom-icon-weibo"></i>
            <span>微博</span>
        </div>
    </footer>

</main>